<template>
  <div class="agent-detail">
    <!-- <navbar :title="'代理详情'"></navbar> -->
    <div class="info-list">
      <div class="info-item avatar">
        <p>头像</p>
        <p>
          <img :src="agentDetail.head_img ? staticHost + agentDetail.head_img : defaultAvatar" alt />
        </p>
      </div>
      <div class="info-item">
        <p>姓名</p>
        <p v-if="agentDetail.name">{{agentDetail.name}}</p>
      </div>
      <div class="info-item">
        <p>编号</p>
        <p v-if="agentDetail.name">{{agentDetail.agent_number}}</p>
      </div>
      <div class="info-item">
        <p>手机</p>
        <p v-if="agentDetail.phone">{{agentDetail.phone}}</p>
      </div>
      <div class="info-item">
        <p>代理级别</p>
        <p v-if="agentDetail.level_name">{{agentDetail.level_name}}</p>
      </div>
      <div class="info-item">
        <p>省份</p>
        <p v-if="agentDetail.province_name">{{agentDetail.province_name}}</p>
      </div>
      <div class="info-item">
        <p>城市</p>
        <p v-if="agentDetail.city_name">{{agentDetail.city_name}}</p>
      </div>
      <div class="info-item">
        <p>区县</p>
        <p v-if="agentDetail.country_name">{{agentDetail.country_name}}</p>
      </div>
      <div class="info-item">
        <p>地址</p>
        <p v-if="agentDetail.address">{{agentDetail.address}}</p>
      </div>
      <div class="info-item">
        <p>加入时间</p>
        <p v-if="agentDetail.join_time">{{agentDetail.join_time}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import agentItem from "../components/agent_item.vue";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
import { defaultAvatar } from "../service/default_source.js";
import { staticHost } from '../service/HOST.js'

export default {
  components: {
    navbar,
    agentItem
  },
  data() {
    return {
      staticHost: staticHost,
      defaultAvatar: defaultAvatar,
      agentID: this.$route.query.id,
      agentDetail: {}
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    this.getAgentDetail();
  },
  methods: {
    // 获取代理详情
    getAgentDetail() {
      return http
        .post(urls.DLXQ, {
          id: this.agentID,
          tokenId: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            this.agentDetail = res.data.data;
          }
        });
    }
  }
};
</script>

<style scoped>
.info-list {
  background-color: #fff;
}

.info-item {
  border-bottom: 1px solid var(--line-between-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  transition: 0.2s;
}

.info-item:hover {
  background-color: var(--line-between-color);
}

.info-item img {
  width: 100%;
  height: 100%;
}

.avatar > p:last-child {
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  border-radius: 50%;
  overflow: hidden;
}
</style>